import React, { useEffect, useState } from 'react';
import { Tooltip } from 'react-tooltip';

import { seo } from '../../../helpers';
import { useAppDispatch, useAppSelector } from '../../../hooks';
import LayoutBase from '../../../layouts/Base';
import { getX4Wares } from '../../../redux/x4/wares';
import { formatNumber } from '../x4-helpers';
import './Wares.scss';

const X4Wares = () => {
  const dispatch = useAppDispatch();
  const { wares } = useAppSelector((state) => state.x4Wares);

  const [searchTerm, setSearchTerm] = useState<string>('');

  useEffect(() => {
    if (!wares) dispatch(getX4Wares());
    else {
      seo({
        title: 'X4 Wares',
        metaDescription: 'X4 Foundations, Split Vendetta and Cradle of Humanity wares',
        // @ts-ignore
        keywords: Object.keys(wares.transport).map((wareKey) => wares.transport[wareKey].name),
      });
    }
  }, [dispatch, wares]);

  return (
    <LayoutBase title="X4 Wares">
      <div className="x4-wares">
        <Tooltip id="ware-description" events={['hover']} />
        <table className="x4-wares__table">
          <thead>
            <tr>
              <th></th>
              <th>Ware</th>
              <th>Group</th>
              <th>Type</th>
              <th className="number">Volume</th>
              <th className="number">Min</th>
              <th className="number">Max</th>
              <th className="number">Average</th>
            </tr>
          </thead>
          <tbody>
            {wares &&
              Object.keys(wares.transport).map((wareKey) => (
                <tr key={wareKey}>
                  <td>
                    <span
                      className="x4-wares__tooltip"
                      data-tooltip-id="ware-description"
                      data-tooltip-html={wares.transport[wareKey].description}
                    >
                      ?
                    </span>
                  </td>
                  <td>{wares.transport[wareKey].name} </td>
                  <td className="text--capitalize">{wares.transport[wareKey].group}</td>
                  <td className="text--capitalize">{wares.transport[wareKey].transport} </td>
                  <td className="number">{wares.transport[wareKey].volume} m³</td>
                  <td className="number">{formatNumber(parseInt(wares.transport[wareKey].price.min))} Cr</td>
                  <td className="number">{formatNumber(parseInt(wares.transport[wareKey].price.max))} Cr</td>
                  <td className="number">{formatNumber(parseInt(wares.transport[wareKey].price.average))} Cr</td>
                </tr>
              ))}
          </tbody>
        </table>
      </div>
    </LayoutBase>
  );
};

export default X4Wares;
